<template>
  <div class="page">
    <div class="top">
      <div class="rule">
        <div class="left">

        </div>
        <div class="right">
          <!--推广规则-->
          <!--          <div class="rule-item">{{$t('user.promotionRules')}}</div>-->
          <router-link v-if="userInfo.promoterType === 'INDIVIDUAL'"
            :to="`/notice/${articleAgreementIndividual && articleAgreementIndividual.id}`" target="_blank"
            class="rule-item">{{ $t('user.promotionAgreement') }}</router-link>
          <router-link v-if="userInfo.promoterType === 'GROUP'"
            :to="`/notice/${articleAgreementGroup && articleAgreementGroup.id}`" target="_blank" class="rule-item">{{
              $t('user.promotionAgreement') }}</router-link>
        </div>
      </div>
      <!-- <div class="commission">
          <div class="left">
            <i18n path="user.inviteNewUserPackageUpTo" class="text">
              <template slot="rate">
                <span class="amount">{{userInfo.userCommissionRate}} {{$t('user.brokerage')}}</span>
              </template>
</i18n>
<div class="date" v-if="false">
  活动时间：2023/11/23 - 2023/11/31
</div>
</div>
<div class="right">
  <img src="@/assets/images/user/purse.png" alt="">
</div>
</div> -->
      <div class="head-wrap">
        <div class="min">{{ $t('personal.invitedUsers') }}</div>
        <div class="large">{{ $t('personal.shipping') }}</div>
      </div>
      <div class="content">
        <div class="content-tit">{{ $t('personal.stepDesc') }}</div>
        <div class="content-step">
          <div class="content-dot" /><span>{{ $t('personal.affiliateUsers') }}</span>
        </div>
        <div class="content-step">
          <div class="content-dot" />
          <div>
            <span class="content-txt">{{ $t('personal.registration') }}</span>
            <div class="content-txt-gray">{{ $t('personal.couponsPack') }}</div>
          </div>
        </div>
        <div class="content-step">
          <div class="content-dot" /><span>{{ $t('personal.commission') }}</span>
        </div>
      </div>
      <!-- 分享二维码 -->
      <div class="share-wrap" v-if="userInfo.inviteCode">
        <Row :gutter="24">
          <Col span="8">
          <Poptip class="poptip-wrap" trigger="hover" :title="$t('user.downloadQRCode')" content="content">
            <div slot="content">
              <div class="qr-code">
                <vue-qr @callback="onQrBack" ref="qr" class="qr-code-image" :size="300" :margin="0"
                  :text="inviteLink"></vue-qr>
              </div>
            </div>
            <div class="share-btn" @click="downloadQR">
              <span class="tag">{{ $t('user.methodOne') }}</span>
              <span class="text">{{ $t('user.downloadQRCode') }}</span>
            </div>
          </Poptip>
          <!-- <span class="introduce" @click="onPopQr">
               {{$t('user.viewMethodIntroduction')}}
             </span> -->
          </Col>
          <Col span="8">
          <Poptip class="poptip-wrap" trigger="hover" :title="$t('user.copyLink')" :content="inviteLink">
            <div class="share-btn" @click="onCopy(inviteLink)">
              <span class="tag">{{ $t('user.methodTwo') }}</span>
              <span class="text">{{ $t('user.copyLink') }}</span>
            </div>
          </Poptip>
          <!-- <span class="introduce" @click="onPopLink">
           {{$t('user.viewMethodIntroduction')}}
             </span> -->
          </Col>
          <Col span="8">
          <Poptip class="poptip-wrap" trigger="hover" :title="$t('user.copyInvitationCode')"
            :content="userInfo.inviteCode">
            <div class="share-btn" @click="onCopy(userInfo.inviteCode)">
              <span class="tag">{{ $t('user.methodThree') }}</span>
              <span class="text">{{ $t('user.copyInvitationCode') }}</span>
            </div>
          </Poptip>
          <!-- <span class="introduce" @click="onPopCode">
               {{$t('user.viewMethodIntroduction')}}
             </span> -->
          </Col>
        </Row>
      </div>
      <div style="height: 16px" v-else />

      <div class="flow" v-if="false">
        <div class="left">
          <div class="title-wrap">
            <span class="title">{{ $t('user.allianceProcess') }}</span>
          </div>
          <div class="step">
            <div class="step-item">
              <img src="@/assets/images/user/step-1.png" alt="">
              <span>{{ $t('user.shareInvitationCodeOnSocialMedia') }}</span>
            </div>
            <div class="step-item">
              <img src="@/assets/images/user/step-2.png" alt="">
              <span>{{ $t('user.newUserRegistersOrdersAndReceivesParcel') }}</span>
            </div>
            <div class="step-item">
              <img src="@/assets/images/user/step-3.png" alt="">
              <span>{{ $t('user.earnCommission') }}</span>
            </div>
          </div>
        </div>
        <div class="right" v-if="userInfo.inviteCode">
          <div class="new-user">
            <div class="new-top">
              <span class="label">{{ $t('user.newUser') }}</span>
              <Poptip v-if="false" class="poptip" trigger="hover">
                <span class="iconfont icon-bangzhu"></span>
                <div slot="content">
                  <div>
                    包含自2023年7月1日起成功邀请至{{ appName }}的所有新用户数
                  </div>
                </div>
              </Poptip>
            </div>
            <div class="more">
              <span class="amount">{{ userInfo.inviteCount }}</span>
              <router-link to="/user/invite/invite-record">
                <Icon class="icon" type="ios-arrow-forward" />
              </router-link>
            </div>
          </div>
          <div class="bonus">
            <span class="amount">{{ userInfo.commissionBalance }}</span>
            <div>
              <span>{{ $t('user.withdrawableCommission') }}（{{ userInfo.currencyCode }}）</span>
              <Poptip trigger="hover" v-if="false">
                <span class="iconfont icon-bangzhu"></span>
                <div slot="content">
                  <div>
                    1. 这是活动期间(2023.7.23~2023.12.31), 100buy为您额外提供的奖金，额外奖金金额=新用户在此期间提包所产生的佣金*30%。

                  </div>
                  <div>
                    2. 额外奖金只能在每月1号领取
                  </div>
                  <div>
                    3. 若推广者因违规而导致推广联盟功能被禁用了，额外奖金将会被清空
                  </div>
                </div>
              </Poptip>
            </div>
          </div>
          <div class="right-footer">
            <router-link to="/user/withdraw?type=commission">
              <Button class="btn">{{ $t('user.withdraw') }}</Button>
            </router-link>
            <router-link class="commission" to="/user/invite/commission-record">{{ $t('user.commissionDetails')
            }}</router-link>
          </div>
        </div>
        <div class="right" v-else>
          <div class="new-user">
            <div class="new-top">
              <span class="label">{{ $t('user.youHaveNotOpenedInvitationsYet') }}</span>
            </div>
          </div>
          <div class="bonus">
            <span class="amount">{{ $t('user.highCommission') }}</span>
            <div>
              <span>{{ $t('user.inviteFriendsToGetCommission') }}</span>
              <Poptip trigger="hover" v-if="false">
                <span class="iconfont icon-bangzhu"></span>
                <div slot="content">
                  <div>
                    1. 这是活动期间(2023.7.23~2023.12.31), 100buy为您额外提供的奖金，额外奖金金额=新用户在此期间提包所产生的佣金*30%。

                  </div>
                  <div>
                    2. 额外奖金只能在每月1号领取
                  </div>
                  <div>
                    3. 若推广者因违规而导致推广联盟功能被禁用了，额外奖金将会被清空
                  </div>
                </div>
              </Poptip>
            </div>
          </div>
          <div class="right-footer">
            <!--开通协议-->
            <Button class="btn" @click="onAgree" :loading="openLoading">{{ $t('user.openInvitations') }}</Button>
          </div>
        </div>
      </div>
    </div>


    <!--我的联盟-->
    <div class="my-alliance" v-if="false">
      <div class="alliance-title">
        <div>
          <span class="title">我的联盟</span>
          <span class="text">已邀请用户：0</span>
          <Tooltip max-width="200px" content="60天内您的其中一个用户有妥投包裹，则该用户为您的1个活跃用户">
            <span class="active-user">（活跃用户：0）</span>
          </Tooltip>
          <router-link to="/user/invite/record">
            <Icon class="icon" type="ios-arrow-forward" />
          </router-link>
        </div>
        <span class="setting">收款设置</span>
      </div>

      <div class="bonus-available">
        <Row :gutter="16">
          <Col span="8">
          <div class="available-item">
            <span class="text">可领取奖金（{{ userCurrency.code }}）</span>
            <span class="amount">300</span>
            <Row class="available-btn" gutter="16">
              <Col span="11">
              <Button long class="btn" type="primary">领取</Button>
              </Col>
              <Col span="11">
              <Button long class="btn">奖金记录</Button>
              </Col>
            </Row>
          </div>
          </Col>
          <Col span="8">
          <div class="available-item">
            <span class="text">可领取奖金（{{ userCurrency.code }}）</span>
            <span class="amount">300</span>
            <Row class="available-btn" gutter="16">
              <Col span="11">
              <Button disabled long class="btn" type="primary">领取</Button>
              </Col>
              <Col span="11">
              <Button disabled long class="btn">奖金记录</Button>
              </Col>
            </Row>
          </div>
          </Col>
          <Col span="8">
          <div class="available-item">
            <span class="text">可领取奖金（{{ userCurrency.code }}）</span>
            <span class="amount">300</span>
            <Row class="available-btn" gutter="16">
              <Col span="11">
              <Button disabled long class="btn" type="primary">领取</Button>
              </Col>
              <Col span="11">
              <Button disabled long class="btn">奖金记录</Button>
              </Col>
            </Row>
          </div>
          </Col>
        </Row>
      </div>
    </div>

    <!--我的权益-->
    <div class="my-interest" v-if="false">
      <div class="alliance-title">
        <div>
          <span class="title">我的权益</span>
          <Poptip class="poptip" trigger="hover">
            佣金率
            <span class="iconfont icon-bangzhu"></span>
            <div slot="content">
              <div>
                <div>
                  什么是佣金率？
                </div>
                您的推广用户成功收到包裹后，100buy会给您发放该包裹运费总额*佣金率的奖励
              </div>
            </div>
          </Poptip>
        </div>
        <span class="setting">积分记录</span>
      </div>
      <Row class="vip-interest">
        <Col flex="28%" class="interest-item">
        <div class="vip-level current-level">General Promoter</div>
        <span class="text">佣金率</span>
        <span class="rate">4%</span>
        <div class="progress">
          <Progress :percent="25" hide-info />
          <div class="progress-text">
            <span class="label">积分</span>
            <span class="value">0/5000</span>
          </div>
        </div>
        </Col>
        <Col flex="18%" class="interest-item">
        <div class="vip-level">Primary Promoter</div>
        <span class="text">佣金率</span>
        <span class="rate">4%</span>
        <div class="progress">
          <Progress :percent="0" hide-info />
          <div class="progress-text">
            <span class="label">积分</span>
            <span class="value">0/5000</span>
          </div>
        </div>
        </Col>
        <Col flex="18%" class="interest-item">
        <div class="vip-level">Senior Promoter</div>
        <span class="text">佣金率</span>
        <span class="rate">4%</span>
        <div class="progress">
          <Progress :percent="25" hide-info />
          <div class="progress-text">
            <span class="label">积分</span>
            <span class="value">0/5000</span>
          </div>
        </div>
        </Col>
        <Col flex="18%" class="interest-item">
        <div class="vip-level">VIP Promoter</div>
        <span class="text">佣金率</span>
        <span class="rate">4%</span>
        <div class="progress">
          <Progress :percent="25" hide-info />
          <div class="progress-text">
            <span class="label">积分</span>
            <span class="value">0/5000</span>
          </div>
        </div>
        </Col>
        <Col flex="18%" class="interest-item">
        <div class="vip-level">MVP Promoter</div>
        <span class="text">佣金率</span>
        <span class="rate">7%</span>
        <div class="progress">
          <Progress :percent="25" hide-info />
          <div class="progress-text">
            <span class="label">积分</span>
            <span class="value">0/400000</span>
          </div>
        </div>
        </Col>
      </Row>
    </div>
    <!-- 我的推广 -->
    <div class="extendTxt">{{ $t('personal.MyAffiliate') }}</div>
    <div class="extend" v-if="userInfo.inviteCode">
      <div class="extend-left">
        <div class="line-sty">
          <div class="balance">{{ $t('personal.balance') }} </div>
          <router-link class="commission" to="/user/invite/commission-record">
            <div class="text-record">{{ $t('personal.Record') }} </div>
          </router-link>
        </div>
        <div class="count">
          <span class="count-label">{{ userCurrency.code }}</span>
          <span class="count-val">{{ commissionInfo.commissionBalance }}</span>
        </div>
        <div class="btn-box">
          <!-- 提现的界面路由 -->
          <!-- <router-link to="/user/withdraw?type=commission"> -->
          <div class="btn-box-record" @click="drawBtn()">{{ $t('personal.Withdraw') }} </div>
          <!-- </router-link> -->
        </div>
      </div>
      <div class="extend-right">
        <router-link to="/user/invite/commission-record?type=0" class="extend-right-item">
          <div class="line-left">
            <div>{{ $t('personal.UnsettledAmount') }}</div>
            <!-- <img class="icon-what" src="@/assets/images/user/invite-what.png" alt="what"> -->
          </div>
          <div class="line-right">
            <div>
              <span class="count-label">{{ userCurrency.code }}</span>
              <span class="count-val">{{ commissionInfo.unsettleCommissionBalance }}</span>
            </div>
            <img class="icon-right" src="@/assets/images/user/invite-right.png" alt="right">
          </div>
        </router-link>
        <router-link to="/user/invite/commission-record?type=1" class="extend-right-item middle-sty">
          <div class="line-left">
            <div>{{ $t('personal.BonusEarned') }}</div>
            <!-- <img class="icon-what" src="@/assets/images/user/invite-what.png" alt="what"> -->
          </div>
          <div class="line-right">
            <div>
              <span class="count-label">{{ userCurrency.code }}</span>
              <span class="count-val">{{ commissionInfo.hadCommissionBalance }}</span>
            </div>
            <img class="icon-right" src="@/assets/images/user/invite-right.png" alt="right">
          </div>
        </router-link>
        <div class="extend-right-item3">
          <router-link to="/user/invite/invite-record" class="line">
            <div class="line-left">
              <div>{{ $t('personal.InvitedUsers') }}</div>
              <!-- <img class="icon-what" src="@/assets/images/user/invite-what.png" alt="what"> -->
            </div>
            <div class="line-right">
              <div>
                <span class="count-val">{{ commissionInfo.inviteUserNum }}</span>
              </div>
              <img class="icon-right" src="@/assets/images/user/invite-right.png" alt="right">
            </div>
          </router-link>
          <div class="line">
            <div class="line-left">
              <div class="tip">{{ $t('personal.Shipments') }} </div>
              <!-- <img class="icon-what" src="@/assets/images/user/invite-what.png" alt="what"> -->
            </div>
            <div class="line-right">
              <span class="count-val">{{ commissionInfo.orderPersonNumOfInviteUser }}</span>
            </div>
          </div>
          <div class="line">
            <div class="line-left">
              <div class="tip">{{ $t('personal.allShipments') }} </div>
              <!-- <img class="icon-what" src="@/assets/images/user/invite-what.png" alt="what"> -->
            </div>
            <div class="line-right">
              <span class="count-val">{{ commissionInfo.orderNumOfInviterUser }}</span>
            </div>
          </div>
          <div class="line">
            <div class="line-left">
              <div class="tip">{{ $t('personal.valShipments') }} </div>
              <!-- <img class="icon-what" src="@/assets/images/user/invite-what.png" alt="what"> -->
            </div>
            <div class="line-right">
              <span class="count-label">{{ userCurrency.code }}</span>
              <span class="count-val">{{ commissionInfo.expressAmountOfInviterUser }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="unExtend" v-else>
      <div class="left">
        <div class="right">
          <div class="new-user">
            <div class="new-top">
              <span class="label">{{ $t('user.youHaveNotOpenedInvitationsYet') }}</span>
            </div>
          </div>
          <div class="bonus">
            <span class="amount">{{ $t('user.highCommission') }}</span>
            <div>
              <span>{{ $t('user.inviteFriendsToGetCommission') }}</span>
            </div>
          </div>
          <div class="right-footer">
            <!--开通协议-->
            <Button class="btn" @click="onAgree" :loading="openLoading">{{ $t('user.openInvitations') }}</Button>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的特权 -->
    <div class="privilege">
      <div class="privilege-head">
        <div class="privilege-head-label">{{ $t('personal.Privilege') }} </div>
        <div class="privilege-head-val">
          <div class="privilege-head-val-tip">{{ $t('personal.CommissionScale') }}</div>
          <!-- <img class="privilege-head-val-icon" src="@/assets/images/user/invite-what.png" alt="what"> -->
        </div>
      </div>
      <div class="privilege-body">
        <div class="privilege-body-left">
          <div class="v1">{{ `V${userInfo.promoteLevel || 0}` }}</div>
          <div class="rate">{{ $t('personal.CommissionScale') }}</div>
          <div class="rate-val">{{ `${getPromoteScore}% + 2%` }}</div>
          <div class="line" />
          <div class="exp">
            <div class="exp-label">{{ $t('personal.Credit') }}</div>
            <div class="exp-val"><span class="exp-val-left">{{ userInfo.promoteScore }}</span>/<span
                class="exp-val-right">6000</span></div>
          </div>
        </div>
        <div class="privilege-body-right">
          <table class="table" align="center" width="400" cellspacing="0">
            <thead>
              <tr>
                <th class="bg">{{ $t('personal.PromoterLevel') }}</th>
                <th class="bg">v1</th>
                <th class="bg">v2</th>
                <th class="bg">v3</th>
                <th class="bg">v4</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="bg">{{ $t('personal.ShippingFees') }}</td>
                <td>4.5%</td>
                <td>5%</td>
                <td>5.5%</td>
                <td>6%</td>
              </tr>
              <tr>
                <td class="bg">{{ $t('personal.SecondaryInvitees') }}</td>
                <td>2%</td>
                <td>2%</td>
                <td>2%</td>
                <td>2%</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- 佣金比例 -->
    <div class="extendTxt">{{ $t('personal.CommissionRate') }}</div>
    <div class="commissionRate">
      {{ $t('personal.Individual') }}<br />
      {{ $t('personal.Affiliate') }}<br />
      {{ $t('personal.Level1') }}<br />
      {{ $t('personal.Level2') }}<br />
      {{ $t('personal.Level3') }}<br />
      {{ $t('personal.Level4') }}<br />
      {{ $t('personal.promoter') }}<br />
      {{ $t('personal.promotionLevel4') }}<br />
      {{ $t('personal.corresponding') }}<br />
      {{ $t('personal.promoterApply') }}
    </div>

    <t-agreement v-if="userInfo.promoterType === 'INDIVIDUAL' && articleAgreementIndividual"
      :id="articleAgreementIndividual.id" @confirm="confirmAgreement" @close="closeAgreement" v-model="popup">
    </t-agreement>
    <t-agreement v-if="userInfo.promoterType === 'GROUP' && articleAgreementGroup" :id="articleAgreementGroup.id"
      @confirm="confirmAgreement" @close="closeAgreement" v-model="popup">
    </t-agreement>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { promoteOpen, commissionInfoApi } from "@/api/invite";
import VueQr from 'vue-qr'
import TAgreement from "@/components/t-agreement";
export default {
  name: "invite",
  components: { TAgreement, VueQr },
  data() {
    return {
      popup: false, // 免责弹窗
      consentAgreement: false, // 同意协议
      openLoading: false,
      appName: process.env.VUE_APP_NAME,
      commissionInfo: {}
    }
  },
  computed: {
    ...mapState({
      config: state => state.config.config,
      userInfo: state => state.user.userInfo,
      userCurrency: state => state.user.userCurrency,
      articleAgreementIndividual: (state) => {
        // 100buy平台推广协议-个人
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_INDIVIDUAL_PROMOTION;
        }
        return obj;
      },
      articleAgreementGroup: (state) => {
        // 100buy平台推广协议-t团体
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_GROUP_PROMOTION;
        }
        return obj;
      }
    }),
    inviteLink() {
      return `${this.config.webDomain}/register?inviteCode=${this.userInfo.inviteCode}`;
    },
    getPromoteScore() {
      const level = this.userInfo.promoteLevel;
      if (level == 1) {
        return 4.5
      }
      if (level == 2) {
        return 5
      }
      if (level == 3) {
        return 5.5
      }
      if (level == 4) {
        return 6
      }
      return 4.5
    }
  },
  mounted() {
    this.getCommissionInfo()
  },
  methods: {
    drawBtn() {
      if (window.ssq) {
        ssq.push('chatOpen')
      }
    },
    getCommissionInfo() {
      commissionInfoApi().then(({ result = {} }) => {
        this.commissionInfo = result
      }).catch()
    },
    closeAgreement(bol) {
      this.consentAgreement = bol;
    },
    confirmAgreement(bol) {
      // 同意协议
      this.consentAgreement = bol;
      this.onPromoteOpen();
    },
    downloadQR() {
      let aElement = document.createElement('a');
      let time = new Date().getTime();
      aElement.download = 'qr' + time + '.png';
      aElement.href = this.$refs.qr.$el.src;
      aElement.dispatchEvent(new MouseEvent('click'));
    },
    onQrBack(info) {
      console.log(info);
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    onAgree() {
      // 开通团队同意协议
      this.popup = true;
    },
    onPromoteOpen() {
      // 开通团队
      this.openLoading = true;
      promoteOpen('general').then((res) => {
        this.$store.dispatch('getUserInfo');
        this.openLoading = false;
      }).catch(() => {
        this.openLoading = false;
      })
    },
    onPopQr() {
      let hint1 = this.$t('user.step1ShareYourExclusiveQRCodeWithFriends');
      let hint2 = this.$t('user.step2FriendScansYourExclusiveQRCode');
      let hint3 = this.$t('user.step3FriendSuccessfullyRegistersAndIsAutomaticallyBoundAsYourPromotionUser');
      this.$Modal.info({
        title: this.$t('user.downloadQRCode'),
        content: `<div>
           <p>${hint1}</p>
           <p>${hint2}</p>
           <p>${hint3}</p>
      </div>`
      });
    },
    onPopLink() {
      let hint1 = this.$t('user.step1ShareYourExclusiveLink');
      let hint2 = this.$t('user.step2FriendOpensExclusiveLink');
      let hint3 = this.$t('user.step3FriendSuccessfullyRegistersAndIsAutomaticallyBoundAsYourPromotionUser');

      this.$Modal.info({
        title: this.$t('user.copyInvitationLink'),
        content: `<div>
           <p>${hint1}</p>
           <p>${hint2}</p>
           <p>${hint3}</p>
      </div>`
      });
    },
    onPopCode() {
      let hint1 = this.$t('user.step1ShareYourExclusiveInvitationCode');
      let hint2 = this.$t('user.step2FriendOpens');
      let hint3 = this.$t('user.step3FriendRegistersAndEntersYourExclusiveInvitationCode');

      this.$Modal.info({
        title: this.$t('user.copyInvitationCode'),
        content: `<div>
           <p>${hint1}</p>
           <p>${hint2} <a :href="${window.location.origin}/register" target="_blank">${window.location.origin}/register</a></p>
                 <p>${hint3}</p>
      </div>`
      });
    }
  }
}
</script>

<style scoped lang="less">
.page {
  .unExtend {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    min-height: 198px;
    background: #FFFFFF;

    .right {
      flex: 0 0 44%;
      padding: 24px 30px;
      box-sizing: border-box;
      background: linear-gradient(269deg, #037DFF 0%, #11C3FF 98%, #11C3FF 99%);
      border-radius: 8px;

      .new-user {
        .new-top {
          .label {
            color: #fff;
            font-size: 14px;
          }
        }
      }

      .bonus {
        display: flex;
        align-items: center;
        margin: 6px 0;
        color: #fff;
        font-size: 14px;

        .amount {
          display: block;
          margin-right: 12px;
          color: #FFFFFF;
          font-size: 48px;
          font-weight: 700;
        }
      }

      .right-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn {
          width: 192px;
          height: 41px;
          border-radius: 80px;
          background: #fff;
          color: #0587FF;
        }
      }
    }
  }

  .commissionRate {
    background: #FAFAFA;
    padding: 16px;
    border-radius: 10px;
    font-size: 12px;
    color: #6F7478;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .privilege {
    &-head {
      display: flex;
      margin: 25px 0;

      &-label {
        font-size: 20px;
        font-weight: bold;
        color: #232323;
        margin-right: 25px;
      }

      &-val {
        display: flex;
        align-items: center;

        &-tip {
          font-size: 12px;
          color: #666666;
        }

        &-icon {
          width: 12px;
          height: 12px;
        }
      }
    }

    &-body {
      display: flex;

      &-left {
        padding: 25px;
      }

      &-right {
        flex: 1;

        .table {
          border-collapse: collapse;
          width: 96%;
          text-align: center;

          .bg {
            background: #E7F4FF;
          }
        }

        .table,
        tr,
        th,
        td {
          border: 1px solid #BECBD6;
          padding: 16px 10px;
        }
      }

      .v1 {
        background: linear-gradient(153deg, #FE6579 0%, #F3C9CA 83%);
        box-shadow: 0px 4px 10px 0px rgba(30, 103, 178, 0.2);
        width: 78px;
        height: 78px;
        border-radius: 78px;
        font-size: 34px;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
      }

      .rate {
        font-weight: 500;
        font-size: 14px;
        color: #232323;
        text-align: center;
        margin: 16px 0;
      }

      .rate-val {
        font-size: 24px;
        font-weight: bold;
        color: #232323;
        text-align: center;
      }

      .line {
        width: 222px;
        height: 6px;
        border-radius: 50px;
        background: #D8D8D8;
        margin: 16px 0 12px;
      }

      .exp {
        font-size: 12px;
        font-weight: 500;
        color: #666666;
        display: flex;
        justify-content: space-between;

        &-val {
          &-left {
            color: #0380FF;
          }
        }
      }
    }
  }

  .extendTxt {
    font-size: 20px;
    font-weight: bold;
    margin: 26px 0;
  }

  .extend {
    display: flex;

    &-right {
      flex: 1;

      .middle-sty {
        margin: 16px 0;
      }

      &-item {
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px solid #DCDEE2;
        display: flex;
        justify-content: space-between;
        padding: 16px;
      }

      &-item3 {
        border-radius: 4px;
        box-sizing: border-box;
        border: 1px solid #DCDEE2;
        padding: 16px;

        .line {
          display: flex;
          justify-content: space-between;

          .icon-what {
            width: 16px;
            height: 16px;
            margin-left: 5px;
          }
        }
      }

      .line-left {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #232323;

        .icon-what {
          width: 16px;
          height: 16px;
          margin-left: 5px;
        }

        .tip {
          font-size: 14px;
          color: #A0AAB6;
        }
      }

      .line-right {
        display: flex;
        align-items: center;

        .icon-right {
          width: 23px;
          height: 23px;
        }

        .count-label {
          font-size: 14px;
          color: #666666;
          margin-right: 4px;
        }

        .count-val {
          font-size: 24px;
          color: #232323
        }
      }
    }

    &-left {
      margin-right: 20px;
      border-radius: 10px;
      color: #fff;
      padding: 25px;
      background: linear-gradient(153deg, #FE6579 0%, #F3C9CA 83%);

      .line-sty {
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(220, 246, 255, 0.3);

        .balance {
          background: url(@/assets/images/user/invite-purse.png) no-repeat;
          background-size: 16px;
          background-position: left;
          padding-left: 20px;
        }

        .text-record {
          font-family: Open Sans, Open Sans;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 14px;
        }
      }

      .count {
        margin-top: 35px;

        &-label {
          font-size: 12px;
          font-weight: normal;
          margin-right: 16px;
        }

        &-val {
          font-size: 50px;
          font-weight: bold;
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;
        margin-top: 110px;

        &-draw {
          width: 192px;
          height: 41px;
          border-radius: 80px;
          background: #FFFFFF;
          color: #0587FF;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 35px;
          cursor: pointer;
        }

        &-record {
          width: 192px;
          height: 41px;
          border-radius: 80px;
          border: 1px solid #fff;
          color: #fff;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }

  .top {
    // padding: 64px;
    // background: linear-gradient(315deg, #FF8E38 4%, #F03838 100%);
    border-radius: 4px;
    margin: 0px;
    background: url(@/assets/images/user/invite-bg.png) no-repeat;
    background-size: 100% 100%;

    // background-attachment: fixed;
    .head-wrap {
      color: #FFFFFF;
      text-align: center;

      .min {
        font-size: 40px;
        font-weight: 900;
      }

      .large {
        font-size: 70px;
        font-weight: 900;
      }
    }

    .content {
      background: #fff;
      margin: 0 auto;
      width: 760px;
      border-radius: 10px;
      padding: 25px;

      &-tit {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
      }

      &-step {
        display: flex;
        align-items: center;
        margin-left: 115px;
        margin-top: 30px;

        span {
          color: #232323;
          font-size: 14px;
        }
      }

      &-dot {
        width: 9px;
        height: 9px;
        border-radius: 9px;
        background: #FE6579;
        margin-right: 73px;
      }

      &-txt-gray {
        font-size: 10px;
        color: #999999;
      }
    }

    .rule {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 0 0;

      .left {}

      .right {
        display: flex;
        align-items: center;

        .rule-item {
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
          height: 42px;
          border-radius: 50px;
          opacity: 1;
          display: flex;
          flex-direction: column;
          padding: 11px 16px;
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }

    .commission {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;

      .left {
        .text {
          display: block;
          color: #FFFFFF;
          font-size: 32px;
          line-height: 32px;
          font-weight: 500;
        }

        .amount {
          display: block;
          margin: 16px 0;
          color: #FFFFFF;
          font-size: 96px;
          line-height: 96px;
          font-weight: 900;
        }

        .date {
          display: inline-block;
          padding: 8px 24px;
          background: #232323;
          border-radius: 60px;
          color: #FFFFFF;
          font-size: 14px;
        }
      }

      .right {
        img {
          display: block;
          width: 333px;
        }
      }
    }

    .flow {
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      min-height: 198px;
      background: #FFFFFF;

      .left {
        flex: 1;
        box-sizing: border-box;
        padding: 24px 30px;

        .title-wrap {
          position: relative;

          .title {
            position: relative;
            color: @t-title-color;
            font-size: 18px;
            font-weight: 700;
            z-index: 2;
          }

          &:after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            content: "";
            width: 68px;
            height: 6px;
            z-index: 1;
            background: linear-gradient(315deg, #F1822F 4%, #F03838 100%);
            border-radius: 4px;
          }
        }

        .step {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;

          &-item {
            flex: 0 0 25%;

            img {
              display: block;
              width: 48px;
              margin: 0 auto;
            }

            span {
              display: block;
              margin-top: 8px;
              text-align: center;
              color: @t-title-color;
              font-size: 14px;
            }
          }
        }
      }

      .right {
        flex: 0 0 44%;
        padding: 24px 30px;
        box-sizing: border-box;
        background: @t-title-color;
        border-radius: 8px;

        .new-user {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .new-top {
            .label {
              color: @t-special-color;
              font-size: 14px;
            }

            .iconfont {
              color: @t-special-color;
              font-size: 14px;
            }
          }

          .more {
            display: flex;
            align-items: center;
            color: @t-special-color;
            font-size: 14px;

            .icon {
              color: @t-special-color;
              font-size: 14px;
            }
          }
        }

        .bonus {
          display: flex;
          align-items: center;
          margin: 6px 0;
          color: @t-special-color;
          font-size: 14px;

          .amount {
            display: block;
            margin-right: 12px;
            color: #FFFFFF;
            font-size: 48px;
            font-weight: 700;
          }

          .iconfont {
            color: @t-special-color;
            font-size: 14px;
          }
        }

        .right-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .btn {
            min-width: 120px;
            background: linear-gradient(315deg, #FF8E38 4%, #F03838 100%);
            height: 44px;
            border: 0;
            color: #FFFFFF;
          }

          .commission {
            cursor: pointer;
            color: @primary-color;
            font-size: 14px;
          }

          span {
            cursor: pointer;
            color: @primary-color;
            font-size: 14px;
          }
        }
      }
    }

    .share-wrap {
      width: 760px;
      margin: auto;
      padding-bottom: 16px;

      .poptip-wrap {
        display: block;
        width: 100%;
        margin-top: 24px;

        .qr-code {
          width: 150px;

          .qr-code-image {
            width: 100%;
          }
        }

        :deep(.ivu-poptip-rel) {
          width: 100%;
        }
      }

      .title-wrap {
        position: relative;

        .title {
          position: relative;
          color: #FFFFFF;
          font-size: 18px;
          font-weight: 700;
          z-index: 2;
        }

        &:after {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 2px;
          content: "";
          width: 68px;
          height: 6px;
          z-index: 1;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 4px;
        }
      }

      .text {
        display: block;
        margin-top: 4px;
        color: #FFFFFF;
        font-size: 14px;
      }

      .share-btn {
        position: relative;
        // background: @t-title-color;
        border-radius: 2px;
        padding: 18px 0;
        text-align: center;
        cursor: pointer;
        background: rgba(25, 40, 53, 0.6);

        .tag {
          position: absolute;
          top: 0;
          left: 0;
          padding: 2px 10px;
          text-align: center;
          background: #FF8734;
          border-radius: 2px 2px 2px 2px;
          color: #FFFFFF;
          font-size: 10px;
        }

        .text {
          color: #FFFFFF;
          font-size: 14px;
          font-weight: 500;
        }
      }

      .introduce {
        display: inline-block;
        cursor: pointer;
        margin-top: 8px;
        border-bottom: 1px solid #FFFFFF;
        color: #FFFFFF;
        font-size: 12px;

      }
    }
  }

  .my-alliance {
    margin-top: 40px;

    .alliance-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        color: @t-title-color;
        font-size: 16px;
        font-weight: 500;
      }

      .text {
        margin-left: 16px;
        color: #999999;
        font-size: 16px;
        font-weight: 500;
      }

      .active-user {
        cursor: pointer;
        color: @primary-color;
        font-size: 16px;
        font-weight: 500;
      }

      .icon {
        color: #999999;
        cursor: pointer;
        font-size: 18px;
      }

      .setting {
        cursor: pointer;
        color: @primary-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .bonus-available {
      margin-top: 8px;

      .available-item {
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid @t-table-border-color;
        padding: 32px;

        .text {
          display: block;
          color: @t-text-color;
          font-size: 14px;
        }

        .amount {
          color: @t-title-color;
          font-size: 32px;
          font-weight: 700;
          line-height: 32px;
        }

        .available-btn {
          margin-top: 24px;

          .btn {}
        }
      }
    }
  }

  .my-interest {
    margin-top: 40px;

    .alliance-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        margin-right: 16px;
        color: @t-title-color;
        font-size: 16px;
        font-weight: 500;

      }

      .setting {
        cursor: pointer;
        color: @primary-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .vip-interest {
      margin-top: 16px;
      border: 1px solid @t-table-border-color;

      .interest-item {
        padding: 24px;
        box-sizing: border-box;
        border-left: 1px solid @t-table-border-color;

        &:first-child {
          border-left: 0;
        }

        .vip-level {
          padding: 4px 0;
          text-align: center;
          color: #FFFFFF;
          background: @t-special-color;
          border-radius: 40px;
          font-size: 14px;
        }

        .current-level {
          background: @primary-color;
        }

        .text {
          display: block;
          margin-top: 8px;
          text-align: center;
          color: @t-text-color;
          font-size: 14px;
        }

        .rate {
          display: block;
          margin-bottom: 12px;
          text-align: center;
          color: @t-title-color;
          font-size: 24px;
        }

        .progress {
          &-text {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: @t-text-color;
            font-size: 14px;

            .label {}

            .value {}
          }
        }
      }
    }
  }
}
</style>